<script setup>
import { ref, onMounted } from 'vue'
import { selAreasApi } from '@/commons/api'
import Selector from '@/components/select/Selector'

// 定义父组件传来的参数
const props = defineProps({
  areaList: {
    type: Object,
    required: false,
    default: {provId: '', provName: '', provCode: '', cityId: '', cityName: '', cityCode: '', distId: '', distName: '', distCode: '', strtId: '', strtName: '', strtCode: ''}
  }
})

// 自动加载，判断权限
onMounted(() => {
  selArea(1)
  if(props.areaList.provId && props.areaList.provId!=='') {
    selArea(2)
  }
  if(props.areaList.cityId && props.areaList.cityId!=='') {
    selArea(3)
  }
  if(props.areaList.distId && props.areaList.distId!=='') {
    selArea(4)
  }
})

const emits = defineEmits(['setAreas'])

// selArea 选择地区
const areaRef = ref(props.areaList)
const provList = ref([])
const cityList = ref([])
const distList = ref([])
const strtList = ref([])
const selArea = async (kind) => {
  let pid = '0'
  switch(kind) {
    case 1:
      provList.value = []
      cityList.value = []
      distList.value = []
      strtList.value = []
      break
    case 2:
      cityList.value = []
      distList.value = []
      strtList.value = []
      pid = areaRef.value.provId
      break
    case 3:
      distList.value = []
      strtList.value = []
      pid = areaRef.value.cityId
      break
    case 4:
      strtList.value = []
      pid = areaRef.value.distId
      break
    default:
      provList.value = []
      cityList.value = []
      distList.value = []
      strtList.value = []
      break
  }
  const res = await selAreasApi({pid})
  if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
    switch(kind) {
      case 1:
        provList.value = res.data
        break
      case 2:
        cityList.value = res.data
        break
      case 3:
        distList.value = res.data
        break
      case 4:
        strtList.value = res.data
        break
    }
  }
}
const selByKey = () => {}

// 设置下拉框的值
const setValue = (item, kind) => {
  switch(kind) {
    case 1:
      areaRef.value.provId = item.selId
      areaRef.value.provName = item.selName
      areaRef.value.provCode = item.selCode
      areaRef.value.cityId = '0'
      areaRef.value.cityName = ''
      areaRef.value.cityCode = ''
      areaRef.value.distId = '0'
      areaRef.value.distName = ''
      areaRef.value.distCode = ''
      areaRef.value.strtId = '0'
      areaRef.value.strtName = ''
      areaRef.value.strtCode = ''
      selArea(2)
      break
    case 2:
      areaRef.value.cityId = item.selId
      areaRef.value.cityName = item.selName
      areaRef.value.cityCode = item.selCode
      areaRef.value.distId = '0'
      areaRef.value.distName = ''
      areaRef.value.distCode = ''
      areaRef.value.strtId = '0'
      areaRef.value.strtName = ''
      areaRef.value.strtCode = ''
      selArea(3)
      break
    case 3:
      areaRef.value.distId = item.selId
      areaRef.value.distName = item.selName
      areaRef.value.distCode = item.selCode
      areaRef.value.strtId = '0'
      areaRef.value.strtName = ''
      areaRef.value.strtCode = ''
      selArea(4)
      break
    case 4:
      areaRef.value.strtId = item.selId
      areaRef.value.strtName = item.selName
      areaRef.value.strtCode = item.selCode
      emits('setAreas', areaRef.value)
      break
  }
}
</script>

<template>
  <div>
    <div class="ipt-title">所在地区</div>
    <div class="area-a">
      <div class="mr15"><selector :kind="1" :selList="provList" :inboxed="true" :curName="areaRef.provName ? areaRef.provName + '[' + areaRef.provCode + ']' : ''" pre-name="省份" @setValue="setValue" @selByKey="selByKey" /></div>
      <div class="mr15"><selector :kind="2" :selList="cityList" :inboxed="true" :curName="areaRef.cityName ? areaRef.cityName + '[' + areaRef.cityCode + ']' : ''" pre-name="地市" @setValue="setValue" @selByKey="selByKey" /></div>
      <div class="mr15"><selector :kind="3" :selList="distList" :inboxed="true" :curName="areaRef.distName ? areaRef.distName + '[' + areaRef.distCode + ']' : ''" pre-name="区县" @setValue="setValue" @selByKey="selByKey" /></div>
      <div><selector :kind="4" :selList="strtList" :inboxed="true" :curName="areaRef.strtName ? areaRef.strtName + '[' + areaRef.strtCode + ']' : ''" pre-name="街道" @setValue="setValue" @selByKey="selByKey" /></div>
    </div>
  </div>
</template>

<style scoped>
.area-a {display: flex; display: -webkit-flex;}
</style>
